<html>
<head>
    <title>ArtPlayer Demo</title>
    <meta name="referrer" content="never">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="Access-Control-Allow-Credentials" content="*"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
    <link rel="dns-prefetch" href="//yanxuan.nosdn.127.net" />
    <link rel="preconnect" href="//yanxuan.nosdn.127.net" crossorigin>

    <meta charset="UTF-8"/>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            border: 0;
            overflow: hidden
        }

        .favnow {
            width: 100%;
            height: 100%;
            background: #000
        }



    </style>
</head>
<body>

<div id="xgitv">

</div>

<div class="favnow"></div>




<script src="artplayer.hls.min.js"></script>
<script src="artplayer.js"></script>
<script src="artplayer-plugin-danmuku.js"></script>

<script>

    var options = {
        container: '.favnow',
        //url: 'http://qiniu.acyou.cn/video/20240617142317%40%E6%95%99%E4%BD%A0%E6%80%8E%E4%B9%88%E6%B7%B7%E7%A4%BE%E4%BC%9A03%E4%B8%AD%E5%9B%BD%E6%9C%80%E7%9C%9F%E5%AE%9E%E7%9A%84%E7%A4%BE%E4%BA%A4%E5%85%B3%E7%B3%BB.mp4',
        url:'https://super.ffzy-online6.com/20240530/32196_4ff67cc9/2000k/hls/index.m3u8',
        type: 'm3u8',
        volume: 1,//播放器的默认音量
        isLive: false,//使用直播模式，会隐藏进度条和播放时间
        muted: false, //是否默认静音
        autoplay: false,//是否自动播放
        autoSize: false,
        autoMini: false,//当播放器滚动到浏览器视口以外时，自动进入 迷你播放 模式

        //设置面板，然后自带四个内置项：flip, playbackRate, aspectRatio, subtitleOffset
        setting: true,
        flip: true,//是否显示视频翻转功能，目前只出现在 设置面板 和 右键菜单 里
        aspectRatio: true,//是否显示视频长宽比功能，会出现在 设置面板 和 右键菜单 里
        playbackRate: true,//是否显示视频播放速度功能，会出现在 设置面板 和 右键菜单 里
        subtitleOffset: true,//字幕时间偏移，范围在 [-5s, 5s]，出现在 设置面板 里

        loop: false,//是否循环播放
        screenshot: true,//是否在底部控制栏里显示 视频截图 功能
        pip: true,//是否在底部控制栏里显示 画中画 的开关按钮
        fullscreen: true,//是否在底部控制栏里显示播放器 窗口全屏 按钮
        fullscreenWeb: true,//是否在底部控制栏里显示播放器 网页全屏 按钮

        playbackRateList: [.5, 1, 1.5, 2, 2.5, 3],
        miniProgressBar: true,//迷你进度条，只在播放器失去焦点后且正在播放时出现

        mutex: true,//假如页面里同时存在多个播放器，是否只能让一个播放器播放
        hotkey: true,//是否使用快捷键
        backdrop: true,
        playsInline: true,
        autoPlayback: true,
        airplay: true,
        theme: '#FF9900',
        cssVar: {},
        fastForward: true,
        layers: [

        ],
        videoTitle: "《庆余年 第二季 第35集》",
        plugins: [
            //videoTitlePlugin("《我是歌手2024 第一期》")
            //https://artplayer.org/document/plugin/danmuku.html#%E5%85%A8%E9%83%A8%E9%80%89%E9%A1%B9
            artplayerPluginDanmuku({
                speed: 10, // 弹幕持续时间，范围在[1 ~ 10]
                danmuku: [
                    {
                        text: '💥1条弹幕列队来袭~做好准备吧！',
                        time: 2
                    },
                    {
                        text: '请大家遵守弹幕礼仪，文明发送弹幕！',
                        time: 2.5
                    },
                    {
                        text: '<div>你好</div>',
                        time: 5
                    }
                ],
            })
        ]
    };
    const art = new Artplayer(options);

    var element = document.getElementById("xgitv");
    element.innerHTML = "<iframe id='xgitvFrame' style='width: 500px;height: 1000px;display: block;position: absolute;z-index: 1000;' src=\"http://localhost:8035/vplay/130398-2-23.html\"></iframe>";

    var iframe = document.getElementById('xgitvFrame');
    iframe.onload = function() {
        // 你想要调用的方法
        var contentDocument = iframe.contentDocument;
    };

    function iframeLoaded() {
        // 你的方法逻辑
        console.log('Iframe is loaded!', player_aaaa);
    }

/*    function videoTitlePlugin(title) {
        return (art) => {
            art.layers.add(            {
                name: 'videoTitle',
                html: `<div class="video-title">${title}</div>`,
                style: {

                },
                click: function (...args) {
                    //console.info('click', args);
                },
                mounted: function (...args) {
                    //console.info('mounted', args);
                },
            });

            function show() {
                art.layers.videoTitle.style.display = 'block';
            }

            function hide() {
                art.layers.videoTitle.style.display = 'none';
            }

            //art.on('play', hide);
            //art.on('pause', show);

            art.on('control', (state) => {
                if (state) {
                    show()
                }else {
                    hide()
                }
            });

            return {
                name: 'videoTitlePlugin',
                show,
                hide
            };
        }
    }*/

    //const longPressDuration = 500;
    //var beforeTime = new Date().getTime();
    //var keyStatus = 0;
    //var before_playbackRate = 0;
    //document.addEventListener('keydown', function (event) {
    //    if (event.keyCode === 39) {
    //        if (keyStatus === 1) {
    //            //console.log("长按触发");
    //            if (before_playbackRate === 0) {
    //                before_playbackRate = art.playbackRate;
    //            }
    //            art.playbackRate = 3;
    //        } else {
    //            keyStatus = 1;
    //            beforeTime = new Date().getTime();
    //        }
    //    }
//
    //});
//
    //document.addEventListener('keyup', function (event) {
    //    if (event.keyCode === 39) {
    //        var now = new Date().getTime();
    //        if ((now - beforeTime) < longPressDuration) {
    //            //console.log("短按弹起", event)
    //            art.forward = 5;
    //        }else {
    //            //console.log("长按弹起", event)
    //            art.playbackRate = before_playbackRate;
    //            before_playbackRate = 0;
    //        }
    //        keyStatus = 0;
    //    }
    //});



    //art.on('video:ratechange', () => {
    //    console.info('video:ratechange');
    //});

    //art.on('hotkey', (event) => {
    //    if (event.keyCode === 39) {
    //        var now = new Date().getTime();
    //        if ((now - beforeTime) < longPressDuration) {
    //            console.log("长按")
    //        }else {
    //            console.info('hotkey', event, '时间',new Date().getTime());
    //        }
    //        beforeTime = now;
    //    }
    //});

    //art.on('ready', () => {
    //    console.info(art.playbackRate);
    //    art.playbackRate = 2;
    //    console.info(art.playbackRate);
    //});
</script>
</body>
</html>